<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>下拉字母多选框</title>
		<script src="js/jquery.js"></script>
		<script src="js/bundles.js"></script>
		<style>
			.mainselectCity {
				display: inline-block
			}

			.mainselectCity>div {
				position: relative;
				display: inline-block
			}

			.mainselectCity #showCityName {
				border: 1px solid #cccccc;
				height: 40px;
				line-height: 40px;
				display: inline-block;
				border-radius: 4px;
				text-align: center;
			}

			.mainselectCity #maincontent {
				position: absolute;
				width: 120px;
				border: 1px solid #cccccc;
				border-radius: 4px;
				box-shadow: 0 7px 12px #cccccc;
				text-align: center
			}

			.mainselectCity .normal {
				padding: 2px 8px 2px 8px;
				display: block;
				text-align: center
			}

			.mainselectCity .main-content-input {
				padding: 2px 8px 2px 8px;
				display: block
			}

			.mainselectCity .main-content {
				display: block;
				font-size: 14px;
				font-weight: 700;
				text-align: left;
				background-color: #ffffff;
			}

			input[type=checkbox]:hover {
				cursor: pointer;
			}
		</style>
		<script>
			var data3 = [{
					"name": "江苏",
					"city": [{
							"cityName": "南京",
							"cityNumber": "001",
							"city": [{
								"cityName": "南京区",
								"cityNumber": "001"
							}]
						},
						{
							"cityName": "无锡",
							"cityNumber": "002",
							"city": [{
								"cityName": "南京区",
								"cityNumber": "001"
							}]
						},
						{
							"cityName": "苏州",
							"cityNumber": "003"
						}
					]
				},
				{
					"name": "湖北",
					"city": [{
							"cityName": "武汉",
							"cityNumber": "004"
						},
						{
							"cityName": "襄阳",
							"cityNumber": "005"
						},
						{
							"cityName": "荆州",
							"cityNumber": "006"
						}
					]
				},
				{
					"name": "安徽",
					"city": [{
							"cityName": "合肥",
							"cityNumber": "007",
							"city": [{
									"cityName": "合肥",
									"cityNumber": "007"
								},
								{
									"cityName": "六安",
									"cityNumber": "008"
								},
								{
									"cityName": "马鞍山",
									"cityNumber": "009"
								}
							]
						},
						{
							"cityName": "六安",
							"cityNumber": "008"
						},
						{
							"cityName": "马鞍山",
							"cityNumber": "009"
						}
					]
				},
			];

			var slidownSelectOptionse = {
				el: 'dddddd', //容器名称
				type: 'more', //插件类型
				width: '70px', //内容显示宽度
				height: '40px', //内容显示高度
				background: '#ffffff', //默认背景色
				color: '#000000', //默认字体颜色
				selectBackground: '#FF6633', //选中背景色
				selectColor: '#ffffff', //选中字体颜色
				show: 'false', //是否展开
				content: '...请选择...', //要显示的内容
				data: data3 //数据
			}
			//调用方法
			$(document).ready(function() {
				rltTools.slidownSelect(slidownSelectOptionse)
			})
		</script>
	</head>

	<body>
		<!--业务代码套两层-->
		<div class="mainselectCity">
			<div id="dddddd"></div>
		</div>
		<script>
			$(function() {
				$(".normal").hide();
				$(".main-content-input").eq(0).click(function() {
					$(".main-content-input").siblings("span").show();
				})
			})
		</script>
	</body>

</html>
